<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态路由</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  通过{{$route.params.id}}获取传入的参数
-->
<body>
  <div id="app">
    <router-link to="/user/1">我的了</router-link>
    <router-link to="/user/2">我的了</router-link>
    <router-link to="/user/3">我的了</router-link>
    <router-link to="/reglister">重置路由了</router-link>

    <router-view />
  </div>
</body>
<script>
  "use strict";
  const user = {
    template: `<h1 style="color:red;">我就是看看了,ID:{{$route.params.id}}</h1>`
  };
  const reglister = {
    template: `<div>
      <h1>额，挺好的吧</h1>
      <hr/>
    </div>`
  };

  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/user"
    }, {
      path: "/user/:id",
      component: user
    }, {
      path: "/reglister",
      component: reglister
    }]
  });
  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    router
  });
</script>

</html>